<!-- 评价标准设置-->
<template>
  <a-modal
    width="50%"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    :mask-closable="false"
    draggable
    title-align="center"
  >
    <template #title> 编辑评分标准 </template>
    <div class="content">
      <a-form
        :model="formData.data"
        auto-label-width
        layout="vertical"
        :rules="rules1"
        ref="refForm1"
      >
        <a-form-item show-colon label="评分标准设置" field="baseSetting">
          <template #label>
            评分标准设置
            <a-tooltip
              content="注：系统默认评分标准为“五项”，如需要更改可同通过选择不同的选项进行调整"
            >
              <icon-info-circle-fill style="color: #165dff; font-size: 16px" />
            </a-tooltip>
          </template>

          <a-select
            style="width: 200px"
            v-model="formData.data.baseSetting"
            @change="onChange"
          >
            <a-option
              v-for="item in options"
              :value="item.value"
              :label="item.label"
              :key="item.value"
            ></a-option>
          </a-select>
        </a-form-item>
        <a-form-item label="选项名称设置" show-colon field="settingName">
          <a-form :model="formData.data" auto-label-width ref="refForm2">
            <a-form-item
              :label="`选项${index + 1}`"
              v-for="(item, index) in formData.data.baseSetting"
              :key="index"
              show-colon
              :rules="[
                {
                  required: true,
                  message: '请输入'
                }
              ]"
              :field="`settingName.${index}.name`"
            >
              <a-input
                v-model="formData.data.settingName[index].name"
                style="width: 200px"
              ></a-input>
            </a-form-item>
          </a-form>
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { Message } from '@arco-design/web-vue';
import { cloneDeep } from 'lodash';

const props = withDefaults(
  defineProps<{
    visible: boolean; // 是否显示对话框
    bpiData: any; // bpi数据
    rules: any; // 当前的规则
  }>(),
  {
    visible: false
  }
);

const emit = defineEmits(['update:visible', 'rulesSettingEmit']);

const formData = reactive({
  data: {
    baseSetting: 5,
    settingName: [
      {
        name: '优秀A'
      },
      {
        name: '良好B'
      },
      {
        name: '合格C'
      },
      {
        name: '较差D'
      },
      {
        name: '差E'
      }
    ]
  }
});

// 初始数据
const originData = {
  baseSetting: 5,
  settingName: [
    {
      name: '优秀A'
    },
    {
      name: '良好B'
    },
    {
      name: '合格C'
    },
    {
      name: '较差D'
    },
    {
      name: '差E'
    }
  ]
};

watch(
  () => props.visible,
  (newVal: boolean) => {
    if (newVal) {
      formData.data.settingName = cloneDeep(props.rules);
    } else {
      formData.data = cloneDeep(originData);
    }
  }
);

const options = [
  {
    label: '两项',
    value: 2
  },
  {
    label: '三项',
    value: 3
  },
  {
    label: '四项',
    value: 4
  },
  {
    label: '五项',
    value: 5
  },
  {
    label: '六项',
    value: 6
  }
];

let refForm1 = ref(),
  refForm2 = ref();

const rules1 = {
  baseSetting: [
    {
      required: true,
      message: '请选择'
    }
  ],
  settingName: [
    {
      required: true,
      message: '请选择'
    }
  ]
};

const onChange = () => {
  formData.data.settingName = [];
  for (let i = 0; i < formData.data.baseSetting; i++) {
    formData.data.settingName.push({
      name: ''
    });
  }
};

// 保存
const handleOk = async () => {
  if (props.bpiData.length > 0) {
    Message.error('请先清空数据再更改评分标准数据！');
    return;
  }
  if ((await refForm1.value.validate()) && (await refForm2.value.validate()))
    return;
  emit('rulesSettingEmit', cloneDeep(formData.data));
  emit('update:visible', false);
};

// 取消
const handleCancel = () => {
  emit('update:visible', false);
};
</script>

<style scoped lang="less">
.content {
  margin-left: 50%;
  transform: translateX(-50%);
  .dept {
    :deep(.arco-form-item-content-wrapper) {
      width: 200%;
    }
  }
}
</style>
